<?php

#################################################################
#								HTML
#################################################################

/**
 * Button component registed as 'element/dropdown' 
 * 
 * $vars['name']
 * $vars['id']
 * $vars['class']
 * $vars['width']
 * $vars['description']
 * $vars['options']=	array('title', 'value=NULL', 'selected=FALSE', 'disabled=FALSE')
 * $vars['onChange']
 */

if($_CONTEXT=='HTML'){

	$_CSS_STACK->push(blg_get_site_url().'element/dropdown.css', TRUE);
	$_JS_STACK->push(blg_get_site_url().'element/dropdown.js', TRUE);

	//PREPARE DEFAULTS		
	if(empty($vars['id']))
		$vars['id']= 'dropdown_'.random_string(12);

	$class= 'blg_dropdown';
		
	//BUILD
	$dropdown = '<select id="'.$vars['id'].'" blg_id="'.$vars['id'].'"';
	
	if(!empty($vars['class']))
		$dropdown.= ' class="'.$class.' '.$vars['class'].'"';
	else
		$dropdown.= ' class="'.$class.'"';
		
	if(!empty($vars['width'])){
		if(is_int($vars['width']))
			$dropdown.= ' style="width:'.($vars['width']+18).'px;"';
		else
			$dropdown.= ' style="width:'.$vars['width'].';"';
	}		
		
	if(!empty($vars['name']))
		$dropdown.= ' name="'.$vars['name'].'"';
		
	$dropdown.= '>'."\n";
	
	if(!empty($vars['description'])){
		$dropdown.= '<option value="">'.$vars['description'].'&nbsp;&nbsp;&nbsp;</option>'."\n";
		$dropdown.= '<option value="" disabled="disabled">&nbsp;</option>'."\n";
	}	
	
	if(is_array($vars['options']) && count($vars['options'])>0){
		foreach($vars['options'] as $option){
			$title= $value = $selected = $disabled = NULL;
			list($title, $value, $selected, $disabled)= $option;		
			$dropdown.= '<option value="'.(!empty($value)?$value:$title).'" '.($selected===TRUE?'selected="selected"':'').' '.($disabled===TRUE?'disabled="disabled"':'').'>'.$title.'&nbsp;&nbsp;&nbsp;</option>'."\n";	
		}
	}
	
	$dropdown.= '</select>'."\n";
	
	echo $dropdown;
	
	/****************** APPEND JS CODE ********************/
	
	if(!empty($vars['onChange'])){
		$code="
			$('#".$vars['id']."').bind('change', function(){
				".add_trainling_slash($vars['onChange'], ';')."
			});
		";
		
		$_JS_CODE->append($code, ON_DOC_READY);
	}
}
#################################################################
#								JS
#################################################################
elseif($_CONTEXT=='JS'){ ?>

(function($){
     $.fn.extend({
     customStyle : function(options) {
         if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)) {
             return this.each(function() {
                 var currentSelected = $(this).find(':selected');
                 $(this).after('<span class="blg_dropdown_box_effect"><span class="blg_dropdown_box_effectInner">'+currentSelected.text()+'</span></span>').css({position:'absolute', opacity:0,fontSize:$(this).next().css('font-size')});
                 var selectBoxSpan = $(this).next();
                 var selectBoxWidth = parseInt($(this).width()) - parseInt(selectBoxSpan.css('padding-left')) -parseInt(selectBoxSpan.css('padding-right'));            
                 var selectBoxSpanInner = selectBoxSpan.find(':first-child');
                 selectBoxSpan.css({display:'inline-block'});
                 selectBoxSpanInner.css({width:selectBoxWidth, display:'inline-block'});
                 var selectBoxHeight = parseInt(selectBoxSpan.height()) + parseInt(selectBoxSpan.css('padding-top')) + parseInt(selectBoxSpan.css('padding-bottom'));
                 $(this).height(selectBoxHeight).change(function() {
                     selectBoxSpanInner.text($(this).find(':selected').text()).parent().addClass('changed');
                 });
          });
         }
     }
     });
 })(jQuery);

$(document).ready( function(){
	$(function() {
	     $('select.blg_dropdown').customStyle();
	 });
	 
	$('select').focus( function(){
		$(this).addClass('blg_dropdown_focused');		
	});
	
	$('select').blur( function(){
		$(this).removeClass('blg_dropdown_focused');		
	});		 
});

<?php }
#################################################################
#								CSS
#################################################################
elseif($_CONTEXT=='CSS'){ ?>

span.blg_dropdown_box_effect { 
	font-size:11px; 
	background-image: url('<?php echo blg_get_site_url()?>_graphics/default/structure/sombra4.png'); 
	color: #000000; 
	padding: 3px 5px 3px 5px; 
	border: 1px solid <?php echo blg_color('grey', 'D');?>; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	border-radius: 5px 5px; 
	line-height: 11px; 
	cursor: pointer;
} 

span.blg_dropdown_box_effect.changed { 
	background-image: url('<?php echo blg_get_site_url()?>_graphics/default/structure/sombra4.png');
	cursor: pointer;
} 

.blg_dropdown_box_effectInner { 
	background:url('<?php echo blg_get_site_url()?>_graphics/default/icons/dropdown.png') no-repeat center right;
	background-position: right -1px;
	height: 13px;
	cursor: pointer; 
}

select.blg_dropdown{		
	height: 20px;
	line-height: 20px;
	
	color: #000000;
	border: 1px solid <?php echo blg_color('grey', 'D');?>;    
    border-radius:6px;
    
    font-size: 11px;
    padding: 0 4px;
    margin: 1px;
    
    background-image: url('<?php echo blg_get_site_url()?>_graphics/default/structure/sombra4.png');
    cursor: pointer;
}

select.blg_dropdown:hover{
	border: 1px solid <?php echo blg_color('grey', 'B');?>;
}

select.blg_dropdown_focused{
	border: 1px solid <?php echo blg_color('blue', 'dark');?>;
}
select.blg_dropdown_focused:hover{
	border: 1px solid <?php echo blg_color('blue', 'dark');?>;
}

select option{
	font-size: 12px;
	padding: 2px 0 2px 0;
	cursor: default;
}

<?php }
